
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>全部党员信息</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>

<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
  </div>
</script>
<!-- 分页组件 -->
<div>
    <div id="page_container"></div>
</div>

<script>
var limitcount = 10;
var curnum = 1;
function productsearch(productGroupId,start,limitsize) {
	layui.use(['table','laypage','laydate'], function(){
        var table = layui.table,
            laydate=layui.laydate,
            laypage = layui.laypage;
//执行一个 table 实例
	table.render({
	  elem: '#demo'
	  ,height: 'full-170'
	  ,url: 'list' //数据接口
	  ,even:true //开启隔行换色
	  ,title: '用户表'
	  ,cellMinWidth:100
	  ,response: {
			statusCode: 200 //规定成功的状态码，默认：0
			} 
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
		{type: 'checkbox', fixed: 'left'}
	    ,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
	    ,{field: 'name', title: '用户名'}
	    ,{field: 'sex', title: '性别'}
	    ,{field: 'state', title: '用户状态'}
	    ,{field: 'phone', title: '电话'}
	    ,{field:'email', title:'邮箱', width:200, edit: 'text', templet: function(res){
	        return '<em>'+ res.email +'</em>'
	      }}
 	    ,{field: 'org', title: '所属组织'}
	    ,{field: 'pmp', title: '党员权限'} 
	    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	  ]
		]
	  ,page:true
	  ,done: function(res, curr, count){
          //如果是异步请求数据方式，res即为你接口返回的信息。
          //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
          laypage.render({
              elem:'laypage'
              ,count:count
              ,curr:curnum
              ,limit:limitcount
              ,layout: ['prev', 'page', 'next', 'skip','count','limit']
              ,jump:function (obj,first) {
                  if(!first){
                      curnum = obj.curr;
                      limitcount = obj.limit;
                  }
              }
          })
      }
	});
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		layer.open({
			type:1,
			title:'添加用户',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-molv',
			content:layui.$('#add')
		})
		 
		  
	  });
	
	});
}

productsearch(curnum, limitcount);
</script>
<!-- 添加 -->
<form id="add" class="layui-form" action="add" lay-filter="example" method="post" hidden="true">
  <div class="layui-form-item">
    <label class="layui-form-label">用户昵称</label>
    <div class="layui-input-block">
      <input type="text" name="pname" lay-verify="title" autocomplete="off" placeholder="请输入用户昵称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="ppswd" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">真实姓名</label>
    <div class="layui-input-block">
      <input type="text" name="rname" placeholder="请输入用户真实姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别 </label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">身份证号</label>
    <div class="layui-input-block">
      <input type="text" name="idnum" placeholder="请输入用户身份证号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-block">
      <input type="text" name="phone" placeholder="请输入用户电话" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" placeholder="请输入用户邮箱" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
  
    <label class="layui-form-label" >用户状态</label>
    <div class="layui-input-block">
      <select name="pms" lay-filter="aihao">
      	<option value="">请选择</option>
        <option value="1">启用</option>
        <option value="2">禁止</option>
      </select>
    </div>
  </div>
 <div class="layui-form-item">
    <label class="layui-form-label">所属组织</label>
    <div class="layui-input-block">
      <select name="org" lay-filter="aihao">
      	<option value="">请选择</option>
        <option value="1">管理员</option>
        <option value="2">党支部</option>
        <option value="3">党总支</option>
        <option value="4">党委</option>
        <option value="5">党工委</option>
        <option value="6">党员</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户权限</label>
    <div class="layui-input-block">
      <select name="pmp" lay-filter="aihao">
      	<option value="">请选择</option>
        <option value="1">普通用户</option>
        <option value="2">党支部管理员</option>
        <option value="3">党总支管理员</option>
        <option value="4">党委管理员</option>
        <option value="5">党工委管理员</option>
        <option value="6">系统管理员</option>
      </select>
    </div>
  </div>
  
    <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!-- 修改 -->
<form id="update" class="layui-form layui-form-pane" action="update" lay-filter="formTest" method="post" hidden="true" style="height:600px;">
 	<label class="layui-form-label">用户id</label>
    <div class="layui-input-block">
      <input type="text" name="id" lay-verify="title" autocomplete="off" class="layui-input">
    </div>
    <label class="layui-form-label">用户昵称</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="title" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">真实姓名</label>
    <div class="layui-input-block">
      <input type="text" name="rname" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">性别 </label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">身份证号</label>
    <div class="layui-input-block">
      <input type="text" name="idnum" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-block">
      <input type="text" name="phone" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
  
    <label class="layui-form-label" >用户状态</label>
    <div class="layui-input-block layui-form" lay-filter="selFilter">
      <select name="state" id="sel" lay-verify="required" >
      	<option value="">请选择</option>
        <option value="1">启用</option>
        <option value="2">禁用</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  //监听表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(test)', function(obj){ 
    var data = obj.data;
    if(obj.event === 'update'){
    	layui.form.render('select')
    	//1.获取这行数据
    	//2.填充form
    	form.val("formTest",data);
    	/**1.首先需要获取复选框原始的值
    	2.将这个值在页面上展示
    	*/
    	var state=data.state;
    	if(state=="禁用"){
    		layui.$("#sel").val(2);
    	}else{
    		layui.$("#sel").val(1);
    	} 
    	form.render('select','selFilter'); 
    	//3.弹框
    	layer.open({
    		type:1,
			title:'修改用户',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-molv',
			content:layui.$('#update'),	
    	}); 
    } else if(obj.event === 'del'){
      layer.confirm('是否删除数据',{icon:3,title:"确认"}, function(index){
    	  layui.$.ajax({
              url:"delete",
              type:"POST",
              data:{"id":data.id},
              dataType: "json",                
              success: function(data){            
              if(data.id==null){    
            	  layer.msg("删除失败", {icon: 5});              
              }else{
                  layer.msg(data.id);
                  obj.del();//删除这一行
                  layer.close(index);//关闭弹框
                  layer.msg("删除成功", {icon: 6}); 
              	}
              },
              error:function(){
            	  layer.closeAll();
                  parent.location.reload();;//调用父级的layer来关闭弹窗
                  Load(); //删除完需要加载数据
              },
    	  });
      });
    };
  });
});
</script>
</body>
</html>